<template>
  <view class="page flexc">
    <view class="page-navbar">
      <image src="/static/image/bg.png" mode="aspectFill" class="bg"></image>
      <view class="head-nav">
        <u-navbar
          :placeholder="true"
          bgColor="transparent"
          :title="vuex_config.comTitle"
          :safeAreaInsetTop="true"
          :titleStyle="{ color: '#000000', fontWeight: 500 }">
          <view slot="left" class="u-nav-slot navbar-left">
            <view class="head-nav-left-box flex">
              <image
                :src="vuex_config.comLogo"
                mode=""
                style="width: 64rpx; height: 64rpx"></image>
              <view
                class="nav-left-text ellipsis-1"
                style="
                  color: #000000;
                  font-weight: bold;
                  font-size: 32rpx;
                  margin-left: 24rpx;
                ">
                {{ vuex_config.comTitle }}
              </view>
            </view>
          </view>
          <view
            slot="center"
            class="u-nav-slot navbar-center"
            style="display: none"></view>
        </u-navbar>
      </view>

      <view class="head-search">
        <view
          class="search-box flex-center"
          @click="toRoute('/product-search')">
          <image src="@/static/image/search.png"></image>
          <view class="text">搜索作品名称</view>
        </view>
      </view>
    </view>

    <view class="flex1 ctx-bottom over">
      <scroll-view style="height: 100%" scroll-y="true">
        <!-- 顶部导航 -->
        <indexNav :list="modList"></indexNav>

        <!-- 老师列表 -->
        <view class="l-wrap">
          <view class="l-list">
            <view class="flex-between l-top">
              <view class="">老师</view>
              <view class="l-top-t flex" @click="goPage(1)">
                <view class="">全部老师</view>
                <image src="@/static/image/arrow.png" mode="aspectFit"></image>
              </view>
            </view>
            <scroll-view class="s-wrap" scroll-x="true">
              <view class="s-list flex">
                <view class="s-box column-flex-center" v-for="item in 6">
                  <image
                    class="s-box-img"
                    src="/static/demo.jpg"
                    mode="aspectFill"></image>
                  <view class="s-box-t">带用吗</view>
                  <view class="s-box-t1">美术老师</view>
                </view>
                <!--  <view
		  		           class="tag-cat"
		  		           @click="ChannelClick(item)"
		  		           :class="{ active: LikeParams.channelId == item.id }"
		  		           v-for="(item, index) in indexNavList"
		  		           :key="index">
		  		           <text>{{ item.title || "" }}</text>
		  		           <image
		  		             v-if="LikeParams.channelId == item.id"
		  		             src="/static/index/index-ico.png"></image>
		  		         </view> -->
              </view>
            </scroll-view>
          </view>
        </view>
        <!-- 数据列表 -->
        <view class="p-list flex-between">
          <view class="p-wrap" v-for="item in 6">
            <image
              src="/static/demo.jpg"
              mode="aspectFill"
              class="p-wrap-img"></image>
            <view class="ellipsis-2 p-wrap-t">
              作品名称作品名称作品名称作品名称作品名称作品名称作品名称111111
            </view>
            <view class="flex p-wrap-p">
              <text>￥</text>
              395.00
            </view>
            <view class="p-wrap-box flex">
              <image src="/static/avatar.png" mode="aspectFit"></image>
              <text class="p-wrap-box-t">姓名</text>
              <text class="p-wrap-box-t2">美术老师</text>
            </view>
          </view>
        </view>
        <u-loadmore :status="product_loadmore_status" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
import count_down_in_index from "@/components/count-down/count-down-in-index.vue";
import tabbar from "@/components/tabbar/tabbar.vue";
import indexNav from "@/components/index/indexNav.vue";
import productList from "@/components/product/productList.vue";
export default {
  components: {
    count_down_in_index,
    tabbar,
    indexNav,
  },
  data() {
    return {
      defaultHeadBackground: "transparent",
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent
      show_background_color: false,
      //
      banners: [],
      newAdImg: {}, //新品广告图
      modList: [],
      indexNavList: [], //猜你喜欢分类
      advList: [],
      //
      products_default: [],
      //
      daojishi_time_ms: 0,
      products_flashsale: [],
      current_swiper_index_flashsale: 0,
      products_flashsale_group: [],
      //
      products_suggest: [],
      current_swiper_index_suggest: 0,
      products_suggest_group: [],
      products_tehui: [],
      products_jingxuan: [],
      tehui_start: "",
      tehui_end: "",

      //
      pagination: {
        page: 1,
        pageNum: 6,
      },
      product_loadmore_status: "loadmore", //loadmore  / loading / nomore
      brandList: [], //品牌列表

      cart_is_selected_all: false,
      cart_products: [], //产品列表
      cart_total_num: 0, //购物车总数量
      cart_total_price: 0, //购物车总金额
      showCarPoup: false,
      SelectCarList: [], //点击加入购物车的数据

      LikeParams: {
        tags: "猜您喜欢",
        channelId: "",
      },
      user_info: {},
      hot_products: [],
    };
  },

  onLoad() {
    this.user_info = uni.getStorageSync("user_info") || {};
    // this.setView();
    this.query_index_cate();
  },
  onShow() {
    //this.query_cart();

    console.log(this.vuex_is_zhangbei, "100000");
  },
  // onPageScroll(e) {
  // 	// console.log(e)
  // 	if (e.scrollTop != 0) {
  // 		this.show_background_color = true;
  // 	} else {
  // 		this.show_background_color = false;
  // 	}
  // },

  onPageScroll(e) {
    // console.log(e)
    let percent = e.scrollTop / 50;
    percent = percent < 1 ? percent : 1;

    this.headBackground = `rgba(255,255,255,${percent})`;

    if (e.scrollTop != 0) {
      // this.headBackground = this.statusBackgroundMap[this.userRole]
    } else {
      // this.headBackground = ''
    }

    if (percent > 0.5) {
      // this.headBackground = this.statusBackgroundMap[this.userRole]
    } else {
      // this.headBackground = ''
    }
  },

  onReachBottom() {
    this.loadMore();
  },

  methods: {
    goPage(k) {
      this.toRoute("/t-list");
    },
    loadMore() {
      if (this.product_loadmore_status == "loadmore") {
        this.product_loadmore_status = "loading";
        this.pagination.page++;
        this.query_product_default();
      }
    },

    setView() {
      this.query_banner();
      this.query_index_cate();
      this.query_product_flashsale();
      this.query_product_default();
      //获取热销产品
      this.query_hot_product();
      //获取特惠商品
      this.query_product_tehui();
      //获取精选推荐
      this.query_product_jingxuan();
    },

    query_banner() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "banner_index",
          position: 4,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.banners = data[0].images;
          this.newAdImg = data[3].images && data[3].images[0];
        }
      });
    },
    query_index_cate() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_channel",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.modList = res.data.filter((v) => v.isHot == 1);
          this.indexNavList = res.data;
          this.LikeParams.channelId = res.data[0].id || "";
          // let data = res.data
          // this.banners = data[0].images
        }
      });
    },

    query_product_flashsale() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          ifSeckill: 1,
          page: 1,
          pageNum: 100,
        },
      }).then((res) => {
        if (res.code == 200) {
          let list = res.data.list;
          this.daojishi_time_ms = res.data.second * 1000;
          this.products_flashsale = list;
          this.products_flashsale_group = this.get_product_swiper_group(list);
          this.$log("products_flashsale_group", this.products_flashsale_group);
        }
      });
    },

    get_product_swiper_group(list) {
      let group_length = 3;
      let group_list = [];
      list.forEach((v, index) => {
        let gindex = Math.floor(index / group_length);
        if (!group_list[gindex]) {
          group_list[gindex] = [];
        }
        group_list[gindex].push(v);
      });

      return group_list;
    },

    query_product_default() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          tags: this.LikeParams.tags,
          channelId: this.LikeParams.channelId,
          ...this.pagination,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.products_default = this.products_default.concat(res.data.list);
          this.product_loadmore_status =
            res.data.count > this.products_default.length
              ? "loadmore"
              : "nomore";
        }
      });
    },

    query_product_tehui() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          page: 1,
          pageNum: 1,
          ifMember: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.products_tehui = res.data.list;
          let tehui_start =
            (res.data.memberInfo.startTime &&
              res.data.memberInfo.startTime.split(" ")) ||
            "";
          let tehui_end =
            (res.data.memberInfo.endTime &&
              res.data.memberInfo.endTime.split(" ")) ||
            "";

          this.tehui_start = tehui_start && tehui_start[0];
          this.tehui_end = tehui_end && tehui_end[0];
        }
      });
    },

    /* 热销产品 */
    query_hot_product() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          page: 1,
          pageNum: 1,
          tags: "热销产品",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.hot_products = res.data.list;
        }
      });
    },

    query_product_jingxuan() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          page: 1,
          pageNum: 1,
          tags: "精选推荐",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.products_jingxuan = res.data.list;
        }
      });
    },

    to_tehui_detail(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
          startTime: this.tehui_start,
          endTime: this.tehui_end,
        },
      });
    },

    to_flash_detail(item) {
      console.log("点击了");
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
          time: item.cuxiao_time,
        },
      });
    },
    to_suggest_detail(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
        },
      });
    },
    to_detail(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
        },
      });
    },

    changeSwiper(e) {
      this.current = e.detail.current;
    },
    changeSwiperFlash() {},
    changeSwiperSuggest() {},

    banner_swiperClick(index) {
      this.$log("swiper index", index);
      this.$log("swiper item", this.banners[index]);
      this.$log("swiper list", this.banners);

      let item = this.banners[index];
      this.doSwiperClick(item);
    },
    adv_swiperClick(index) {
      this.$log("swiper index", index);
      this.$log("swiper item", this.advList[index]);
      this.$log("swiper list", this.advList);

      let item = this.banners[index];
      this.doSwiperClick(item);
    },

    doSwiperClick(item) {
      let { channelId, inventoryId, url } = item;
      if (!!channelId) {
        this.toRoute({
          path: "/category",
          query: {
            id: channelId,
          },
        });
      } else if (!!inventoryId) {
        this.toRoute({
          path: "/product-detail",
          query: {
            id: inventoryId,
          },
        });
      } else if (url) {
        this.handleUrlJump(url);
      }
    },

    customNavAllClick() {
      this.toRoute({
        path: "/product-list",
        query: {},
      });
    },
    doAddCartFn(item) {
      let gid = item.inventoryId;
      if (item.kucun == "0.00") {
        this.$alert("库存不足！");
        return false;
      }
      if (this.guige_type == "多规格") {
        gid = item.inventoryId;
      }
      let SelectIndex = this.SelectCarList.findIndex(
        (v) => v.inventoryId == item.inventoryId
      );
      if (SelectIndex >= 0) {
        this.SelectCarList.splice(SelectIndex, 1);
      } else {
        this.SelectCarList.push(item.inventoryId);
      }

      this.$api({
        url: "/service.php",
        method: "post",
        data: {
          action: "gouwuche_add",
          inventoryId: gid,
          num: 1,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.query_cart();
          //this.$store.commit('set_vuex_cart_number', res.data.count)
        }
      });
    },

    query_cart() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_lists",
        },
      }).then((res) => {
        if (res.code == 200) {
          let cart_total_num = 0;
          let cart_total_price = 0;
          this.cart_is_selected_all = false;
          res.data.forEach((v) => {
            v.num = parseInt(v.num);
            v.is_selected = false;
            v.keyVals = v.keyVals == "无" ? "默认" : v.keyVals;
            cart_total_num += parseInt(v.num);
            cart_total_price += parseInt(v.num) * parseFloat(v.priceSale);
          });
          this.cart_total_num = cart_total_num;
          this.cart_total_price = parseFloat(cart_total_price).toFixed(2);
          this.cart_products = res.data;

          if (cart_total_num == 0) {
            this.SelectCarList = [];
          }
          this.$store.commit("set_vuex_cart_number", cart_total_num);
        }
      });
    },

    GoodsupdateCarNum(e, item, index) {
      this.$log("item", item);

      let num = e.value;
      let selectGoods = this.cart_products.filter(
        (v) => v.inventoryId == item.inventoryId
      );
      let findIndex = this.cart_products.findIndex(
        (v) => v.inventoryId == item.inventoryId
      );
      console.log(selectGoods, "参数111", num);
      if (selectGoods && num > selectGoods[0].num) {
        //增加
        num = selectGoods[0].num + 1;
      } else if (selectGoods && num < selectGoods[0].num) {
        //减少
        num = selectGoods[0].num - 1;
      }
      console.log(selectGoods, "参数111", num, findIndex);
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_updateNum",
          inventoryId: item.inventoryId, //产品规格id(多个用,分开)
          num: num,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$set(this.cart_products[findIndex], "num", num);
          this.cart_total_num = res.data.count;

          // this.cart_products = this.cart_products.filter(v => !v.is_selected);
          this.$store.commit("set_vuex_cart_number", res.data.count);

          this.$refs.CartBottom.init(this.cart_products, this.cart_total_num);
        }
      });
    },

    SanClick() {
      uni.scanCode({
        success: (res) => {
          console.log("扫码结果", res);
        },
      });
    },

    delcarAll() {
      this.cart_products = []; //产品列表
      this.cart_total_num = 0; //购物车总数量
      this.cart_total_price = 0; //购物车总金额
      this.SelectCarList = [];
      this.$store.commit("set_vuex_cart_number", 0);
    },

    LikeClick() {
      this.LikeParams.tags = "猜您喜欢";
      this.LikeParams.channelId = "";
      this.products_default = [];
      this.pagination.page = 1;
      this.query_product_default();
    },

    ChannelClick(item) {
      this.LikeParams.tags = "";
      this.LikeParams.channelId = item.id;
      this.products_default = [];
      this.pagination.page = 1;
      this.query_product_default();
    },
  },
};
</script>
<style lang="scss">
page {
  background: #f6f6f6;
  height: 100%;
}
</style>

<style lang="scss" scoped>
// 设置标题左对齐
.page-navbar ::v-deep .u-navbar__content__left {
  // display: none;
}

.page-navbar ::v-deep .u-navbar__content__title {
  flex: 1;
  padding-left: 32rpx;
  text-align: left;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
}

// 设置标题左对齐
//  倒计时
::v-deep // 



	.page-head-bg-box {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 562rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

/deep/.u-sticky {
  top: 0 !important;
}
.l-wrap {
  padding: 0 32upx 24upx;
  .l-list {
    background-color: #fff;
    padding: 34upx 24upx 40upx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    .l-top {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      position: relative;
      z-index: 10;
      &-t {
        font-weight: 400;
        font-size: 24rpx;
        & > image {
          width: 13rpx;
          height: 24rpx;
          margin-left: 22upx;
        }
      }
    }
    .s-wrap {
      padding-right: 0;
      margin-top: 28upx;
      .s-box {
        width: 160upx;
        margin-right: 24upx;
        &-img {
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          border: 2rpx solid #707070;
          width: 160rpx;
          height: 200rpx;
        }
        &-t {
          margin: 8upx 0 12upx;
          font-weight: bold;
          font-size: 24rpx;
          color: #000000;
        }
        &-t1 {
          width: 160rpx;
          height: 32rpx;
          background: #f49c0d;
          font-size: 20rpx;
          color: #ffffff;
          text-align: center;
          line-height: 32upx;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
        }
      }
    }
  }
}
.page-navbar {
  background: #fff;
  // background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
  // background: transparent;
  // height: 176rpx;
  position: relative;
  z-index: 1;

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 562upx;
  }
  &.show_background_color {
    background: #ffffff !important;

    .head-nav {
      background: #ffffff !important;
    }

    .head-search {
      background: #ffffff !important;
    }
  }

  .head-nav {
    background: linear-gradient(179deg, #4ec2ff 0%, #7be1dc 100%);
    background: transparent;

    .head-nav-left-box {
      width: 270rpx;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      .nav-left-text {
        margin-left: 6rpx;
        flex: 1;

        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #222222;
      }
    }
  }

  .head-user-info {
    height: 88rpx;
    padding: 0 32rpx;

    .user-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 32rpx;
      color: #000000;
    }

    .user-entry {
      width: 256rpx;
      height: 64rpx;
      background: #f3f8fc;
      border-radius: 36rpx 36rpx 36rpx 36rpx;

      .card {
        width: 52rpx;
        height: 32rpx;
      }

      text {
        margin: 0 16rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #164782;
      }

      .arrow {
        width: 13rpx;
        height: 23rpx;
      }
    }
  }

  .head-search {
    height: 104rpx;
    padding: 8rpx 32rpx 24rpx;
    background-color: #fff;

    .search-box {
      width: 100%;
      height: 72rpx;
      background: #fff;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      border: 1rpx solid #f5f5f5;
      position: relative;
      z-index: 2;
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 24rpx;
      }

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #959595;
      }
    }
  }
}
.p-list {
  padding: 0 32upx 32upx;
  flex-wrap: wrap;
  .p-wrap {
    width: 334rpx;
    background: #fff;
    margin-bottom: 24upx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    &-img {
      width: 334rpx;
      height: 334rpx;
      background: #ffffff;
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      border: 2rpx solid #707070;
    }
    &-t {
      margin: 18upx 22upx 20upx 24upx;
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
      line-height: 32rpx;
    }
    &-p {
      margin-left: 24upx;
      font-weight: bold;
      font-size: 24rpx;
      color: #e23410;
      & > text {
        font-weight: 400;
        font-size: 16rpx;
        color: #e23410;
      }
    }
    &-box {
      margin-left: 24upx;
      margin-top: 20upx;
      padding-bottom: 32upx;
      & > image {
        width: 32rpx;
        height: 32rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        border: 2rpx solid #707070;
      }
      &-t {
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        margin: 0 16upx;
      }
      &-t2 {
        display: block;
        width: 112rpx;
        height: 32rpx;
        text-align: center;
        line-height: 32upx;
        background: #f49c0d;
        font-size: 20rpx;
        color: #ffffff;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
    }
  }
}
// 顶部搜索样式

.page {
  width: 100%;
  height: 100%;
  .page-ctx {
    padding: 0 0rpx;
    position: relative;
    z-index: 1;

    .ctx-top {
      .banner-wrap {
        padding: 0 0rpx;
      }
    }

    .ctx-bottom {
    }
  }
}

.banner-box {
  margin: 24rpx 0;
  margin-top: 10rpx;
  margin-bottom: 0;
  padding: 0 0;

  .banner {
  }
}

.nav-box {
  margin-bottom: 24rpx;
  padding: 40rpx 0 30rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  // border-radius: 32rpx 32rpx 32rpx 32rpx;

  .grid-list {
    flex-wrap: wrap;

    .grid-item {
      width: 25%;
      // flex: 1;
      text-align: center;
      margin-top: 40rpx;

      &:nth-child(-n + 5) {
        margin-top: 0;
      }

      .img-box {
        width: 80rpx;
        height: 80rpx;
        margin: 0 auto;

        .img {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .grid-title {
        margin-top: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }
}

.adv-box {
  padding: 24rpx 32rpx;

  .adv-left {
    .adv-item {
      position: relative;
      width: 334rpx;
      height: 496rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      .tag {
        z-index: 2;
        position: absolute;
        left: 14rpx;
        top: 24rpx;

        text-align: center;
        min-width: 96rpx;
        height: 56rpx;
        background: #ca5007;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
      }

      .poster-box {
        position: relative;
        image {
          width: 334rpx;
          height: 496rpx;
        }
        .new-title {
          position: absolute;
          left: 14rpx;
          bottom: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #ffffff;
        }
      }
    }
  }

  .adv-right {
    .adv-item {
      position: relative;
      width: 334rpx;
      height: 240rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      display: flex;
      align-items: flex-end;

      & + .adv-item {
        margin-top: 16rpx;
      }

      .tag {
        position: absolute;
        left: 14rpx;
        top: 24rpx;
        min-width: 160rpx;
        height: 56rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;

        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;

        &.tag-blue {
          background: #164782;
        }

        &.tag-red {
          background: #c00004;
        }
      }

      .info-box {
        width: 100%;
        align-items: flex-end;

        .price-box {
          padding-left: 16rpx;
          padding-bottom: 24rpx;
          .price-line {
            text-decoration: line-through;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #b7b7b7;
          }

          .price-info {
            margin-top: 6rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }

      .poster-box {
        image {
          width: 168rpx;
          height: 168rpx;
        }
      }
    }
  }
}

.activity-box {
  .activity-item {
    width: 50%;
    width: 100%;
    min-height: 292rpx;
    background: #fff;

    & + .activity-item {
      margin-left: 24rpx;
    }

    .act-title {
      width: 100%;
      min-height: 68rpx;
      // background: linear-gradient(180deg, rgba(81, 178, 199, 0.4) 0%, rgba(81, 178, 199, 0) 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 24rpx 24rpx 0;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;

        image {
          width: 137rpx;
          height: 32rpx;
        }
      }

      .tag {
        margin-left: 16rpx;
        padding: 0 16rpx;
        min-width: 112rpx;
        height: 32rpx;
        background: #51b2c7;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #ffffff;

        &.suggest {
          background: #164782;
        }
      }

      .countdown-wrap {
        .countdown-text {
          margin-right: 20rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
        }
      }
    }

    .product-wrap {
      margin-top: 24rpx;
    }

    .swiper-box {
      .swiper {
        height: 340rpx;

        .swiper-item {
          position: relative;
          height: 340rpx;
          overflow: hidden;
          padding: 0 24rpx;
        }
      }
    }

    .swiper-products {
      padding: 0;
      display: flex;
      // justify-content: space-between;

      .products-scroll-box {
        white-space: nowrap;
      }

      .product-item {
        display: inline-block;
        width: 202rpx;
        margin-right: 16rpx;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .poster-box {
          width: 202rpx;
          height: 202rpx;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 202rpx;
            height: 202rpx;
          }
        }

        .info-box {
          padding-top: 24rpx;
        }

        .ms-price-info {
          text-align: center;

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #164782;
          }
        }

        .price-info {
          text-align: center;
          margin-top: 4rpx;

          text {
            text-decoration: line-through;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
  }
}

.product-wrap {
  margin-top: 0rpx;
  padding: 0 32rpx;
}

.adv-banner-box {
  .banner {
    height: 510rpx;
  }
}

.goods-list {
  flex-wrap: wrap;

  .goods-item {
    margin-bottom: 24rpx;
    width: 334rpx;
    height: 486rpx;
    background: #ffffff;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);

    .poster-box {
      position: relative;
      width: 334rpx;
      height: 332rpx;

      image {
        width: 334rpx;
        height: 332rpx;
      }
    }

    .info-box {
      padding: 24rpx;

      .title-box {
        // height: 70rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;

        image {
          margin-right: 4rpx;
          width: 56rpx;
          height: 28rpx;
        }
      }

      .desc {
        margin-top: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16rpx;
        color: #838b9e;
      }

      .price-box {
        margin-top: 16rpx;

        .price {
          .huobi {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            /* color: #164782; */
          }

          .price-val {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            /* color: #164782; */
          }
        }

        .car-ico {
          width: 32rpx;
          height: 32rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .price-line {
          margin-left: 10rpx;
          flex: 1;
          overflow: hidden;
          text-decoration: line-through;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #7d7d7d;
        }

        .sale {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #9695a3;
        }
      }
    }
  }
}

.brand-box {
  padding: 26rpx 24rpx 40rpx;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin: 24rpx 36rpx 16rpx;

  .brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .brand-top-left {
      text {
        &:nth-child(1) {
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -16rpx;
            width: 2rpx;
            height: 16rpx;
            background: #dde2ec;
            border-radius: 4rpx 4rpx 4rpx 4rpx;
          }
        }

        &:nth-child(2) {
          font-size: 24rpx;
          color: #c7cedb;
          margin-left: 34rpx;
        }
      }
    }

    image {
      width: 12rpx;
      height: 20rpx;
    }
  }

  .brand-list {
    margin-top: 18rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .brand-item {
      width: 202rpx;
      height: 144rpx;
      background: #e6e9f2;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-bottom: 16rpx;
      margin-right: 13rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      image {
        width: 202rpx;
        height: 144rpx;
      }
    }
  }
}
.scrolls-box {
  width: 100%;
  display: flex !important;
  margin-top: 58rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  display: flex;
  padding-bottom: 34rpx;
  .tag-cat {
    flex: 1;
    white-space: nowrap;
    font-size: 28rpx;
    color: #666666;
    margin-right: 56rpx;
    position: relative;
    image {
      position: absolute;
      top: 14rpx;
      right: 0;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .active {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }
}
.scroll-wrap {
  display: flex;
}
</style>
